<template>
	<view class="container" :style="{'--mp-top-bar-height': (mp.topBarHeight + 8) + 'px'}">
		<tui-navigation-bar :isOpacity="false" :maxOpacity="1" @init="initNavigation" :scrollTop="scrollTop"
			backgroundColor="#fff" color="#333" :title="pageTitle">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack"></view>
			</view>
		</tui-navigation-bar>
		<view class="accompany-loading">
			<uv-loading-icon :show="!loading" :size="28" timing-function="linear" mode="circle"></uv-loading-icon>
		</view>
		<view class="main" v-if="loading">
			<view class="topic-list">
				<view class="topic-item" v-for="(item,index) in topicList" :key="index"  @tap.stop.prevent="goTopic(item)">
					<image class="topic-image" :src="item.topicCoverUrl" mode="aspectFill"></image>
					<view class="topic-info">
						<view class="name onelist-hidden">{{item.topicName}}</view>
						<view class="topicIntroduction onelist-hidden">{{item.topicIntroduction}}</view>
						<view class="take-part-in">
							<uv-avatar-group :urls="item.userNumVO.avatarList" size="15" gap="0.3"></uv-avatar-group>
							<view class="num">等{{item.userNumVO.topicUserNum}}人参与</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '话题', //标题
				loading: false,
				topicList: [],
				from: 'index',
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			if (options) {
				this.from = options.from
			}
			this.getTopicList()
		},
		onShow: function() {
			console.log(this.mp);
		},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {
			this.getTopicList(() => {
				uni.stopPullDownRefresh();
			});
		},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			getTopicList() {
				return new Promise((resolve, reject) => {
					app._get(
						'/client/forum-topic/topic-list', null,
						(result) => {
							this.topicList = result.data
						}, null, () => {
							uni.stopPullDownRefresh();
							this.loading = true
							resolve();
						}
					);
				});
			},
			goTopic(item) {
				let topic = JSON.stringify(item)
				uni.navigateTo({
					url: '/page_community/topic/topic?topic=' + topic,
				});
			},
			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
		},
	};
</script>

<style lang="scss">
	page,
	body {
		background: #F6F8F7;
	}
</style>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;

		&::after {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			content: '';
			width: 100vw;
			height: 202rpx;
			background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/order-header3.png');
			background-repeat: no-repeat;
			background-size: 100vw 202rpx;
			box-sizing: border-box;
		}

		/deep/.tui-navigation-bar {
			background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/order-header3.png');
			background-repeat: no-repeat;
			background-size: 100vw 202rpx;
		}

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.accompany-loading {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translateX(-50%, -50%);
		}

		.main {
			box-sizing: border-box;
			padding: 0 36rpx 36rpx;
			padding-top: var(--mp-top-bar-height);
			/* #ifdef H5 */
			padding-top: 88rpx;
			/* #endif */
			position: relative;
			z-index: 2;

			.topic-list {
				.topic-item {
					background: #FFFFFF;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 16rpx;
					margin-bottom: 16rpx;
					display: flex;

					.topic-image {
						flex-shrink: 0;
						width: 196rpx;
						height: 196rpx;
						border-radius: 20rpx;
						margin-right: 24rpx;
					}

					.topic-info {
						width: calc(100% - 196rpx - 24rpx);

						.name {
							font-weight: 900;
							font-size: 32rpx;
							color: #0E0E0D;
							line-height: 45rpx;
							margin: 12rpx 0;
						}

						.topicIntroduction {
							font-weight: 400;
							font-size: 26rpx;
							color: #282D2D;
							line-height: 37rpx;
							margin-bottom: 48rpx;
						}

						.take-part-in {
							font-weight: 400;
							font-size: 22rpx;
							color: #999B9B;
							line-height: 30rpx;
							display: flex;
							align-items: center;

							/deep/.uv-avatar__image {
								border: 2rpx solid #FFFFFF;
								flex-shrink: 0;
							}

							.num {
								margin-left: 8rpx;
							}
						}
					}
				}
			}
		}
	}
</style>